Webアプリでの画面タッチによるいろいろな操作を制限してみた

こんにちは、CX事業本部 IoT事業部の若槻です。

最近、タッチ型PC端末を店頭に設置して不特定多数の人がタッチにより操作するWebアプリケーションを実装する機会があり、その中で下記のタッチ操作を無効にしたいという要望がありました。

• ピンチズーム：2本指でタッチすると画面がズームイン/ズームアウトできてしまう。
• スワイプ：左右にスワイプするとブラウザの「戻る」「進む」ができてしまう。
• テキスト選択：テキストを長押しすると選択でき、そのままweb検索ができてしまう。
• 右クリック：長押しすると右クリックメニューが出てしまう。

そこで今回は、Webアプリケーションで画面タッチによるいろいろな操作を制限（無効化）する方法を確認してみました。

ピンチズーム

ピンチズーム操作はJavaScript（TypeScript）で以下の記述をすれば制限可能です。

const touchHandler = (event: any) => {
  if (event.touches.length > 1) {
    event.preventDefault();
  }
};
document.addEventListener('touchstart', touchHandler, {
  passive: false
});

タッチイベントタイプのtouchstartのうち2点以上のタッチによるアクションをpreventDefault()により無効化しています。

• Element: touchstart event - Web APIs | MDN

詳細については下記エントリでもまとめています。

• [React] 画面タッチによるピンチズーム操作を無効にする | DevelopersIO

スワイプ

スワイプ操作はJavaScript（TypeScript）で以下の記述をすれば制限可能です。

document.addEventListener(
  'touchmove',
  (event: any) => {
    event.preventDefault();
  },
  { passive: false },
);

タッチイベントタイプのtouchmoveのアクションをpreventDefault()により無効化しています。

• Document: touchmove イベント - Web API | MDN

右クリックメニューを開く

右クリックメニューを開く操作はJavaScriptで以下の記述をすれば制限可能です。

document.oncontextmenu = () => {
  return false;
};

contextmenuイベント（右クリック）時の戻り値をfalseにすることにより、右クリックメニューを開けなくしています。

• Element: contextmenu event - Web APIs | MDN

テキスト選択

テキスト選択操作はCSSで以下の記述をすれば制限可能です。

body {
  user-select: none;
}

• user-select - CSS: カスケーディングスタイルシート | MDN

おわりに

Webアプリケーションで画面タッチによるいろいろな操作を制限（無効化）する方法を確認してみました。

今回のような制御をするくらいならWebアプリではなくネイティブアプリで実装すれば良さそうですが、プロジェクトのメンバーのスキルセットや開発期間などによってはWebアプリによる実装とせざるを得ない場合もあります。そのような時にかんたんに制御機能が追加できるのは良いですね。

参考

• TouchEvent - Web APIs | MDN
• CSS | マウスドラッグや長押しによるテキストの選択を無効にする方法 | ONE NOTES
• JavaScriptによる右クリックの禁止・禁止を解除する方法 - Qiita

以上